<template>
  <!-- 顶部标题栏 -->
  <div class="header">
    <div class="container">
      <h1 class="text-center mb-0">校园二手市场</h1>
      <p class="text-center mb-0 mt-2">发现好物，循环价值</p>
    </div>
  </div>
  <div class="container market-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="input-group search-group">
        <input type="text" class="form-control search-input" placeholder="搜索商品..." v-model="searchQuery">
        <button class="btn search-button" @click="searchProducts">
          <i class="bi bi-search"></i> 搜索
        </button>
      </div>
    </div>

    <div class="row">
      <!-- 左侧筛选面板 -->
      <div class="col-lg-3">
        <div class="filter-panel">
          <h5 class="mb-3 filter-title">筛选条件</h5>

          <!-- 价格范围滑块 -->
          <div class="mb-4">
            <label class="form-label fw-bold filter-label">价格范围</label>
            <div class="price-range-controls">
              <div class="price-range-labels">
                <span class="price-label">¥{{ minPrice }}</span>
                <span class="price-label">¥{{ maxPrice }}</span>
              </div>
              <div class="price-slider-labels">
                <div class="d-flex justify-content-between mb-1">
                  <small class="text-muted">最低价格</small>
                  <small class="text-muted">最高价格</small>
                </div>
              </div>
              <div class="price-sliders">
                <input type="range" class="form-range price-slider" min="0" max="1000" step="5" :value="minPrice"
                  @input="updateMinPrice($event.target.value)">
                <input type="range" class="form-range price-slider" min="0" max="1000" step="5" :value="maxPrice"
                  @input="updateMaxPrice($event.target.value)">
              </div>
            </div>
          </div>

          <!-- 排序按钮 -->
          <div class="sort-section">
            <label class="form-label fw-bold filter-label">排序方式</label>
            <div class="sort-buttons">
              <button class="btn sort-btn" :class="{ active: sortOrder === 'asc' }" @click="setSortOrder('asc')">
                <i class="bi" :class="sortOrder === 'asc' ? 'bi-sort-down-alt' : 'bi-arrow-up'"></i>
                价格升序
              </button>
              <button class="btn sort-btn" :class="{ active: sortOrder === 'desc' }" @click="setSortOrder('desc')">
                <i class="bi" :class="sortOrder === 'desc' ? 'bi-sort-down' : 'bi-arrow-down'"></i>
                价格降序
              </button>
            </div>
          </div>

          <!-- 商品类别 -->
          <div class="category-section">
            <label class="form-label fw-bold filter-label">商品类别</label>
            <ul class="category-list">
              <li class="category-item" :class="{ active: selectedCategory === null }" @click="selectCategory(null)">
                <span class="category-icon">📦</span>
                全部
              </li>
              <li v-for="category in categories" :key="category.id" class="category-item"
                :class="{ active: selectedCategory === category.id }" @click="selectCategory(category.id)">
                <span class="category-icon">{{ category.icon }}</span>
                {{ category.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 右侧商品展示 -->
      <div class="col-lg-9">
        <!-- 加载状态 -->
        <div class="loading-spinner" v-if="loading">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
          </div>
        </div>

        <!-- 商品网格 -->
        <div>
          <div class="row">
            <div class="col-md-4 mb-4" v-for="product in paginatedProducts" :key="product.id" @click=GoPost(product.id)>
              <div class="card product-card">
                <div class="position-relative">
                  <img :src="product.image || defaultProductImage" class="product-img" :alt="product.title"
                    @error="handleProductImageError">
                </div>
                <div class="card-body">
                  <h5 class="product-title">{{ product.title }}</h5>
                  <p class="product-description">{{ product.content || product.description }}</p>
                  <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="product-price">¥{{ product.price }}</span>
                    <span class="condition-badge">浏览量：{{ product.viewCount }}</span>
                  </div>
                  <div class="product-meta">
                    <span>{{ product.nickname || product.userId }}</span>
                    <span>{{ formatTime(product.createdAt || product.time) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div class="empty-state" v-if="filteredProducts.length === 0 && !loading">
            <div class="empty-state-icon">📦</div>
            <h4>暂无商品</h4>
            <p>当前筛选条件下没有找到商品，请尝试调整筛选条件</p>
          </div>
        </div>
        <!-- 分页控件 -->
        <div class="pagination-container d-flex justify-content-center mt-4">
          <nav aria-label="页面导航">
            <ul class="pagination">
              <!-- 首页 -->
              <li class="page-item" :class="{ disabled: pageNum === 1 }">
                <a class="page-link" href="#" @click.prevent="changePage(1)" aria-label="首页">
                  <span aria-hidden="true">首页</span>
                </a>
              </li>

              <!-- 上一页 -->
              <li class="page-item" :class="{ disabled: pageNum === 1 }">
                <a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)" aria-label="上一页">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>

              <!-- 页码 -->
              <li class="page-item" v-for="page in pageNumbers" :key="page" :class="{ active: page === pageNum }">
                <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
              </li>

              <!-- 下一页 -->
              <li class="page-item" :class="{ disabled: pageNum === totalPages }">
                <a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)" aria-label="下一页">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>

              <!-- 末页 -->
              <li class="page-item" :class="{ disabled: pageNum === totalPages }">
                <a class="page-link" href="#" @click.prevent="changePage(totalPages)" aria-label="末页">
                  <span aria-hidden="true">末页</span>
                </a>
              </li>

              <!-- 总数量和跳转到指定页 -->
              <li class="page-item">
                <div class="page-jump d-flex align-items-center">
                  <span class="mx-2">共 {{ totalPosts }} 条</span>
                  <span class="mx-2">跳转到</span>
                  <input type="number" class="form-control page-input" v-model="jumpPage" min="1" :max="totalPages"
                    @keyup.enter="jumpToPage">
                  <button class="btn btn-outline-primary btn-sm mx-2" @click="jumpToPage">确定</button>
                </div>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>

    <!-- 感谢信息 -->
    <div class="thank-you-section text-center my-5 py-4">
      <div class="thank-you-content">
        <i class="bi bi-heart-fill text-danger fs-1 mb-3"></i>
        <h3 class="mb-3">感谢您的分享</h3>
        <p class="lead">让闲置物品重新发挥价值</p>
        <div class="appreciation-text mt-3">
          <p>每一次分享都让校园更环保</p>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { getUserInfoByIdService } from '@/api/user.js'
import {
  getPostTypesService,
  getProductsListService,
  getPostCoverByIdService,
  incrementPostViewCountService
} from '@/api/post.js'
// 导入默认图片
import defaultProductImage from '@/assets/images/封面加载失败.webp'

export default {
  name: 'Market',
  setup() {
    // 数据状态
    const minPrice = ref(0)
    const maxPrice = ref(1000)
    const sortOrder = ref('asc')
    const selectedCategory = ref(null)// 选择分类
    const searchQuery = ref('')// 搜索词
    const pageNum = ref(1)// 当前页码
    const pageSize = ref(6) // 每页显示6条
    const totalPosts = ref(0) // 添加总数量
    const jumpPage = ref('')
    const loading = ref(true)
    const categories = ref([])// 商品类别
    const products = ref([])// 商品列表

    // 获取分类数据
    const fetchCategories = async () => {
      try {
        // 获取二手商品分类（categoryId=2对应二手市场分类）
        const response = await getPostTypesService(2)
        console.log('获取分类数据成功:', response)
        // 检查数据格式
        if (!response || !response.data || !Array.isArray(response.data)) {
          console.error('分类数据格式不正确:', response)
          throw new Error('无效的分类数据格式')
        }

        // 为每个分类添加图标
        categories.value = response.data.map(category => {
          // 确保分类对象有正确的属性
          const processedCategory = {
            id: category.id || category.ID || category.categoryId,
            name: category.name || category.title || category.label,
            icon: getCategoryIcon(category.id || category.ID || category.categoryId)
          }

          return processedCategory
        })

      } catch (error) {
        console.error('获取分类数据失败:', error)
      }
    }
    // 根据分类ID获取图标
    const getCategoryIcon = (categoryId) => {
      const icons = {
        7: '💻',
        8: '⚽',
        9: '📚',
        10: '🏠',
        11: '📦'
      }
      return icons[categoryId] || '📦'
    }

    //获取商品列表
    const getProductsList = async () => {
      try {
        const params = {
          categoryId: 2,
          pageNum: pageNum.value,
          pageSize: pageSize.value,
        }
        // 获取商品列表
        const res = await getProductsListService(params)
        console.log('获取商品列表成功:', res.data)


        // 根据res获取productsWithCovers信息
        const productsWithCovers = await Promise.all((res.data.items || res.data.times || []).map(async (item) => {
          //根据res里面的userId获取帖子对应信息
          const userInfo = await getUserInfoByIdService(item.userId)

          try {
            const coverRes = await getPostCoverByIdService(item.id)
            let coverImage = null

            if (coverRes.data && coverRes.data.length > 0) {
              // 如果有封面图片，使用第一张图片
              const firstImage = coverRes.data[0]
              coverImage = firstImage.imageUrl.startsWith('http')
                ? firstImage.imageUrl
                : `http://localhost:8080${firstImage.imageUrl}`
            }

            return {
              ...item,
              nickname: userInfo.data.nickname || userInfo.data.username,
              image: coverImage || item.image,
              viewCount: item.viewCount || 0,
            }
          } catch (error) {
            console.error(`获取商品 ${item.id} 的封面失败:`, error)
            // 如果获取图片失败，保留原有image字段
            return item
          }
        }))

        // 确保数据格式正确
        if (res && res.data) {
          products.value = productsWithCovers
          totalPosts.value = res.data.total || 0
        } else {
          products.value = []
          totalPosts.value = 0
        }
      } catch (error) {
        console.error('获取商品列表失败:', error)
        products.value = [] // 出错时设为空数组
        totalPosts.value = 0
      }
    }

    // 跳转到商品详情页
    const GoPost = (id) => {
      incrementPostViewCountService(id).then(() => {
        // 成功增加浏览量后，可以选择刷新当前页的数据
        getProductsList();
      }).catch((error) => {
        console.error('增加浏览量失败:', error);
      });
      // 跳转到商品详情页--window.open新创建一个窗口
      window.open(`/post/detail/${id}`);
    };

    // 模拟加载延迟
    onMounted(async () => {
      // 获取分类数据
      await fetchCategories()
      // 获取商品列表
      await getProductsList()

      setTimeout(() => {
        loading.value = false
      }, 100)
    })

    // 计算属性：筛选后的商品列表
    const filteredProducts = computed(() => {
      // 确保 products.value 是数组
      let result = Array.isArray(products.value) ? [...products.value] : []

      // 按价格筛选
      result = result.filter(product => product.price >= minPrice.value && product.price <= maxPrice.value)

      // 按类别筛选
      if (selectedCategory.value) {
        result = result.filter(product => {
          // 使用宽松比较以处理可能的类型不匹配问题
          // 如果选择的是ID为11的分类，则同时显示itemTypeId为11和为null的帖子
          if (selectedCategory.value == 11) {
            return product.itemTypeId == 11 || product.itemTypeId == null || product.itemTypeId == undefined;
          } else {
            // 其他分类则只显示对应的itemTypeId
            return product.itemTypeId == selectedCategory.value;
          }
        });
      }

      //toLowerCase() - JavaScript 字符串方法，用于将字符串转换为小写
      //filter() - JavaScript 数组方法，用于创建一个新数组，包含通过测试的所有元素
      //includes() - JavaScript 字符串方法，用于检查字符串是否包含指定的子串
      // 按搜索词筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(product =>
          (product.title && product.title.toLowerCase().includes(query)) ||
          (product.content && product.content.toLowerCase().includes(query)) ||
          (product.description && product.description.toLowerCase().includes(query))
        )
      }

      // 排序
      result.sort((a, b) => {
        const priceA = parseFloat(a.price) || 0;
        const priceB = parseFloat(b.price) || 0;
        
        if (sortOrder.value === 'asc') {
          return priceA - priceB;
        } else {
          return priceB - priceA;
        }
      })

      return result
    })

    // 分页相关计算
    const totalPages = computed(() => {
      return Math.max(1, Math.ceil(totalPosts.value / pageSize.value))
    })

    // 分页后的商品列表
    const paginatedProducts = computed(() => {
      // 如果是使用前端过滤，则使用前端分页和排序
      if (searchQuery.value || selectedCategory.value !== null || minPrice.value !== 0 || maxPrice.value !== 1000) {
        const startIndex = (pageNum.value - 1) * pageSize.value
        return filteredProducts.value.slice(startIndex, startIndex + pageSize.value)
      }
      // 否则返回排序后的数据
      const sortedProducts = [...products.value].sort((a, b) => {
        const priceA = parseFloat(a.price) || 0;
        const priceB = parseFloat(b.price) || 0;
        
        if (sortOrder.value === 'asc') {
          return priceA - priceB;
        } else {
          return priceB - priceA;
        }
      });
      return sortedProducts;
    })

    // 生成页码数组
    const pageNumbers = computed(() => {
      const pages = []
      const maxVisiblePages = 5
      const halfVisible = Math.floor(maxVisiblePages / 2)

      // 确保在没有商品时也显示第一页
      if (totalPages.value <= 0) {
        pages.push(1)
        return pages
      }

      let startPage = Math.max(1, pageNum.value - halfVisible)
      let endPage = Math.min(totalPages.value, startPage + maxVisiblePages - 1)

      if (endPage - startPage + 1 < maxVisiblePages) {
        startPage = Math.max(1, endPage - maxVisiblePages + 1)
      }

      for (let i = startPage; i <= endPage; i++) {
        pages.push(i)
      }

      // 如果没有生成任何页码，至少添加当前页
      if (pages.length === 0) {
        pages.push(pageNum.value)
      }

      return pages
    })

    // 排序方式
    const setSortOrder = async (order) => {
      sortOrder.value = order
      pageNum.value = 1 // 重置到第一页
      // 当排序方式改变时，重新获取数据
      await getProductsList()
      // 强制触发重新计算
      filteredProducts.value.length;
    }

    // 选择类别
    const selectCategory = (itemTypeId) => {
      selectedCategory.value = selectedCategory.value === itemTypeId ? null : itemTypeId
      pageNum.value = 1 // 重置到第一页
      // 强制触发重新计算
      filteredProducts.value.length;
    }

    // 确保最大价格不小于最小价格
    const updateMinPrice = (value) => {
      const newMin = parseInt(value)
      minPrice.value = newMin
      if (newMin >= maxPrice.value) {
        maxPrice.value = newMin
      }
      pageNum.value = 1 // 重置到第一页
      // 强制触发重新计算
      filteredProducts.value.length;
    }

    // 确保最小价格不大于最大价格
    const updateMaxPrice = (value) => {
      const newMax = parseInt(value)
      maxPrice.value = newMax
      if (newMax <= minPrice.value) {
        minPrice.value = newMax
      }
      pageNum.value = 1 // 重置到第一页
      // 强制触发重新计算
      filteredProducts.value.length;
    }

    const changePage = async (page) => {
      // 确保页码在有效范围内
      const newPage = Math.max(1, Math.min(page, totalPages.value))
      if (pageNum.value !== newPage) {
        pageNum.value = newPage
        // 当页面改变时，重新获取数据
        await getProductsList()
      }
    }

    // 跳转到指定页码
    const jumpToPage = async () => {
      const page = parseInt(jumpPage.value)
      if (!isNaN(page) && page >= 1 && page <= totalPages.value) {
        pageNum.value = page
        jumpPage.value = ''
        // 当页面改变时，重新获取数据
        await getProductsList()
      }
    }

    const searchProducts = () => {
      pageNum.value = 1 // 重置到第一页
      // 强制触发重新计算
      filteredProducts.value.length;
    }

    const formatTime = (time) => {
      // 处理不同格式的时间
      let dateObj;
      if (typeof time === 'string') {

        dateObj = new Date(time.replace(' ', 'T'));
      } else {
        dateObj = new Date(time);
      }

      const now = new Date();
      const diffInMs = now - dateObj;
      const diffInHours = diffInMs / (1000 * 60 * 60);

      if (diffInHours < 1) {
        return '刚刚'
      } else if (diffInHours < 24) {
        return `${Math.floor(diffInHours)}小时前`
      } else {
        return `${Math.floor(diffInHours / 24)}天前`
      }
    }

    // 处理商品图片加载错误
    const handleProductImageError = (event) => {
      event.target.src = defaultProductImage
    }

    return {
      minPrice,
      maxPrice,
      sortOrder,// 排序顺序
      selectedCategory,// 选中的类别
      searchQuery,// 搜索词
      pageNum,
      pageSize,
      totalPosts,// 总商品数量
      jumpPage,// 跳转页码
      loading,
      categories,// 商品类别
      filteredProducts,// 筛选后的商品列表
      paginatedProducts,// 分页后的商品列表
      totalPages,// 总页数
      pageNumbers,// 页码数组
      GoPost,//跳转到商品详情页
      setSortOrder,//设置排序顺序
      selectCategory,//选择类别
      updateMinPrice,//最大价格不小于最小价格
      updateMaxPrice,//最小价格不大于最大价格
      changePage,//改变页码
      jumpToPage,//跳转到指定页
      searchProducts,//搜索
      formatTime,//格式化时间
      fetchCategories,//获取分类数据
      getCategoryIcon,//获取分类图标
      handleProductImageError// 处理商品图片加载错误
    }
  }
}
</script>

<style scoped>
:root {
  --primary-color: #4A90E2;
  --secondary-color: #34C759;
  --accent-color: #FF9500;
  --light-gray: #F5F5F5;
  --dark-gray: #333333;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  min-height: 100vh;
}

.market-container {
  padding: 20px 0;
}

.header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 2rem 0;
  border-radius: 0 0 20px 20px;
  margin-bottom: 2rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.header h1 {
  font-weight: 700;
  font-size: 2.2rem;
}

.header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.search-container {
  max-width: 600px;
  margin: 0 auto 2rem;
  padding: 0 15px;
}

.search-group {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: none;
}

.search-input {
  border: none;
  padding: 15px 20px;
  font-size: 1.1rem;
  box-shadow: none;
}

.search-input:focus {
  box-shadow: none;
  border: none;
  outline: none;
}

.search-button {
  background: linear-gradient(135deg, var(--primary-color), #3a7bd5);
  color: white;
  border: none;
  padding: 0 25px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.search-button:hover {
  background: linear-gradient(135deg, #3a7bd5, var(--primary-color));
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.filter-panel {
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  border-radius: 15px;
  padding: 1.8rem;
  box-shadow: var(--card-shadow);
  margin-bottom: 2rem;
  position: sticky;
  top: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.filter-title {
  font-weight: 700;
  color: var(--dark-gray);
  font-size: 1.3rem;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--light-gray);
}

.filter-label {
  color: #495057;
  font-size: 1.1rem;
}

.price-range-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.price-label {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: 600;
}

.price-slider-labels {
  margin-bottom: 0.8rem;
}

.price-slider-labels small {
  font-weight: 500;
}

.price-sliders {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.price-slider {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #dee2e6;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sort-section {
  margin: 2rem 0;
}

.sort-buttons {
  display: flex;
  gap: 12px;
  margin: 1.5rem 0;
}

.sort-btn {
  flex: 1;
  border-radius: 12px;
  padding: 0.8rem;
  transition: all 0.3s ease;
  font-weight: 600;
  border: 2px solid #e9ecef;
  background: white;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-appearance: none;
  appearance: none;
}

.sort-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sort-btn.active {
  background: linear-gradient(135deg, var(--primary-color), #3a7bd5);
  color: white;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.category-section {
  margin: 2rem 0;
}

.category-list {
  list-style: none;
  padding: 0;
}

.category-item {
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e9ecef;
}

.category-item:hover {
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
  transform: translateX(5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.category-item.active {
  background: linear-gradient(135deg, var(--primary-color), #3a7bd5);
  color: white;
  font-weight: 600;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.category-icon {
  margin-right: 12px;
  font-size: 1.4rem;
}

.product-card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--card-shadow);
  height: 100%;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hover-shadow);
}

.product-img {
  height: 200px;
  object-fit: cover;
  width: 100%;
  border-bottom: 1px solid #e9ecef;
}

.product-price {
  color: #ff3b30;
  font-weight: 800;
  font-size: 1.4rem;
}

.product-title {
  font-weight: 700;
  margin-bottom: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #212529;
  font-size: 1.2rem;
}

.product-description {
  color: var(--dark-gray);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
  line-height: 1.5;
  min-height: 3rem; /* 设置最小高度确保至少两行 */
}

.products-wrapper {
  min-height: 600px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #6c757d;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.condition-badge {
  background: linear-gradient(135deg, var(--secondary-color), #28a745);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.pagination-container {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.page-item.active .page-link {
  background: linear-gradient(135deg, var(--primary-color), #3a7bd5);
  border-color: var(--primary-color);
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

.page-link {
  color: var(--primary-color);
  border-radius: 10px !important;
  border: 1px solid #dee2e6;
  margin: 0 3px;
  transition: all 0.3s ease;
  font-weight: 600;
}

.page-link:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
}

.page-input {
  width: 90px;
  padding: 8px;
  height: 40px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  text-align: center;
}

.page-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #6c757d;
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  border-radius: 15px;
  margin: 20px;
  box-shadow: var(--card-shadow);
}

.thank-you-section {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border-radius: 15px;
  color: white;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  margin-top: 2rem;
}

.thank-you-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

.thank-you-content h3 {
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.thank-you-content .lead {
  font-size: 1.3rem;
  opacity: 0.95;
  font-weight: 500;
}

.thank-you-content .appreciation-text p {
  font-style: italic;
  margin: 0;
  opacity: 0.9;
  font-weight: 400;
}

.empty-state-icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

@media (max-width: 768px) {
  .header {
    padding: 1.5rem 0;
  }

  .header h1 {
    font-size: 1.8rem;
  }

  .filter-panel {
    padding: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .product-img {
    height: 160px;
  }

  .page-jump {
    padding: 5px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-input {
    width: 70px;
    height: 35px;
    font-size: 14px;
  }

  .sort-buttons {
    flex-direction: column;
  }
}
</style>